<template>
	<div class="center-preview"
		:style='{ "padding": "0 7%", "margin": "20px auto 40px", "flexWrap": "wrap", "background": "#fff", "display": "flex", "width": "100%", "position": "relative", "justifyContent": "space-between" }'>
		<div class="title"
			:style='{ "margin": "0px 0 20px", "color": "#333", "textAlign": "center", "background": "url(http://codegen.caihongy.cn/20230921/eb4b56c7d55142c4b9339e032022bfb5.png) repeat-x center bottom", "width": "100%", "fontSize": "24px", "lineHeight": "56px", "height": "66px" }'>
			{{ title }}</div>

		<div class="info"
			:style='{ "padding": "10px", "boxShadow": "0 0px 0px rgba(0, 0, 0, 0.3)", "margin": "20px 0 0 0", "borderColor": "#1abc9e30", "borderRadius": "0px", "background": "none", "borderWidth": "0 0 0 0px", "width": "25%", "borderStyle": "solid", "height": "auto", "order": "2" }'>
			<div
				:style='{ "padding": "0 20px", "borderColor": "#efefef", "color": "#1abc9e", "borderWidth": "0 0 0px 0", "background": "none", "width": "100%", "lineHeight": "44px", "fontSize": "18px", "borderStyle": "solid", "fontWeight": "600", "height": "44px" }'>
				个人信息</div>
			<div :style='{ "borderColor": "#1abc9e20", "margin": "0 auto", "borderWidth": "0 0 1px 0", "width": "90%", "fontSize": 0, "borderStyle": "solid", "height": "auto" }'
				v-if="userTableName == 'yonghu'">
				<el-image
					:style='{ "margin": "10px auto", "borderColor": "#efefef", "objectFit": "cover", "borderRadius": "0", "borderWidth": "0 0 1px 0", "display": "block", "width": "100%", "borderStyle": "solid", "height": "180px" }'
					:src="sessionForm.touxiang ? baseUrl + sessionForm.touxiang : require('@/assets/avator.png')"
					fit="cover"></el-image>
			</div>
			<div :style='{ "borderColor": "#1abc9e20", "margin": "0 auto", "borderWidth": "0 0 1px 0", "width": "90%", "fontSize": 0, "borderStyle": "solid", "height": "auto" }'
				v-if="userTableName == 'zhuanjia'">
				<el-image
					:style='{ "margin": "10px auto", "borderColor": "#efefef", "objectFit": "cover", "borderRadius": "0", "borderWidth": "0 0 1px 0", "display": "block", "width": "100%", "borderStyle": "solid", "height": "180px" }'
					:src="sessionForm.touxiang ? baseUrl + sessionForm.touxiang : require('@/assets/avator.png')"
					fit="cover"></el-image>
			</div>
			<div :style='{ "padding": "0 20px", "borderColor": "#1abc9e20", "margin": "0 auto", "borderWidth": "0 0 1px 0", "display": "flex", "width": "90%", "lineHeight": "40px", "borderStyle": "solid", "height": "auto" }'
				v-if="userTableName == 'yonghu'">
				<span class="icon iconfont icon-shouye-zhihui"
					:style='{ "padding": "0 5px", "fontSize": "14px", "color": "#333", "display": "none" }'></span>
				<div :style='{ "color": "#333", "margin": "0 10px 0 0", "fontSize": "14px" }'>用户账号</div>
				<div :style='{ "fontSize": "14px", "color": "#999", "textAlign": "left", "flex": 1 }'>
					{{ sessionForm.yonghuzhanghao }}</div>
			</div>
			<div :style='{ "padding": "0 20px", "borderColor": "#1abc9e20", "margin": "0 auto", "borderWidth": "0 0 1px 0", "display": "flex", "width": "90%", "lineHeight": "40px", "borderStyle": "solid", "height": "auto" }'
				v-if="userTableName == 'yonghu'">
				<span class="icon iconfont icon-shouye-zhihui"
					:style='{ "padding": "0 5px", "fontSize": "14px", "color": "#333", "display": "none" }'></span>
				<div :style='{ "color": "#333", "margin": "0 10px 0 0", "fontSize": "14px" }'>用户姓名</div>
				<div :style='{ "fontSize": "14px", "color": "#999", "textAlign": "left", "flex": 1 }'>
					{{ sessionForm.yonghuxingming }}</div>
			</div>
			<div :style='{ "padding": "0 20px", "borderColor": "#1abc9e20", "margin": "0 auto", "borderWidth": "0 0 1px 0", "display": "flex", "width": "90%", "lineHeight": "40px", "borderStyle": "solid", "height": "auto" }'
				v-if="userTableName == 'yonghu'">
				<span class="icon iconfont icon-shouye-zhihui"
					:style='{ "padding": "0 5px", "fontSize": "14px", "color": "#333", "display": "none" }'></span>
				<div :style='{ "color": "#333", "margin": "0 10px 0 0", "fontSize": "14px" }'>性别</div>
				<div :style='{ "fontSize": "14px", "color": "#999", "textAlign": "left", "flex": 1 }'>{{ sessionForm.xingbie }}
				</div>
			</div>
			<div :style='{ "padding": "0 20px", "borderColor": "#1abc9e20", "margin": "0 auto", "borderWidth": "0 0 1px 0", "display": "flex", "width": "90%", "lineHeight": "40px", "borderStyle": "solid", "height": "auto" }'
				v-if="userTableName == 'yonghu'">
				<span class="icon iconfont icon-shouye-zhihui"
					:style='{ "padding": "0 5px", "fontSize": "14px", "color": "#333", "display": "none" }'></span>
				<div :style='{ "color": "#333", "margin": "0 10px 0 0", "fontSize": "14px" }'>手机号码</div>
				<div :style='{ "fontSize": "14px", "color": "#999", "textAlign": "left", "flex": 1 }'>{{ sessionForm.shoujihaoma }}
				</div>
			</div>
			<div :style='{ "padding": "0 20px", "borderColor": "#1abc9e20", "margin": "0 auto", "borderWidth": "0 0 1px 0", "display": "flex", "width": "90%", "lineHeight": "40px", "borderStyle": "solid", "height": "auto" }'
				v-if="userTableName == 'yonghu'">
				<span class="icon iconfont icon-shouye-zhihui"
					:style='{ "padding": "0 5px", "fontSize": "14px", "color": "#333", "display": "none" }'></span>
				<div :style='{ "color": "#333", "margin": "0 10px 0 0", "fontSize": "14px" }'>余额</div>
				<div :style='{ "fontSize": "14px", "color": "#999", "textAlign": "left", "flex": 1 }'>{{ sessionForm.money }}</div>
			</div>
			<div :style='{ "padding": "0 20px", "borderColor": "#1abc9e20", "margin": "0 auto", "borderWidth": "0 0 1px 0", "display": "flex", "width": "90%", "lineHeight": "40px", "borderStyle": "solid", "height": "auto" }'
				v-if="userTableName == 'yonghu'">
				<span class="icon iconfont icon-shouye-zhihui"
					:style='{ "padding": "0 5px", "fontSize": "14px", "color": "#333", "display": "none" }'></span>
				<div :style='{ "color": "#333", "margin": "0 10px 0 0", "fontSize": "14px" }'>建筑喜好</div>
				<div :style='{ "fontSize": "14px", "color": "#999", "textAlign": "left", "flex": 1 }'>
					{{ sessionForm.jianzhuleixing }}</div>
			</div>
			<div :style='{ "padding": "0 20px", "borderColor": "#1abc9e20", "margin": "0 auto", "borderWidth": "0 0 1px 0", "display": "flex", "width": "90%", "lineHeight": "40px", "borderStyle": "solid", "height": "auto" }'
				v-if="userTableName == 'yonghu'">
				<span class="icon iconfont icon-shouye-zhihui"
					:style='{ "padding": "0 5px", "fontSize": "14px", "color": "#333", "display": "none" }'></span>
				<div :style='{ "color": "#333", "margin": "0 10px 0 0", "fontSize": "14px" }'>文学喜好</div>
				<div :style='{ "fontSize": "14px", "color": "#999", "textAlign": "left", "flex": 1 }'>
					{{ sessionForm.zuopinfenlei }}</div>
			</div>
		</div>

		<el-tabs tab-position="left"
			:style='{ "width": "72%", "margin": "20px 0 0", "flexWrap": "wrap", "background": "#fff", "display": "flex", "order": "1" }'
			@tab-click="handleClick">
			<el-tab-pane label="个人中心">
				<el-form class="center-preview-pv" ref="sessionForm" :model="sessionForm" :rules="rules"
					label-width="80px">
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }'
						v-if="userTableName == 'yonghu'" label="用户账号" prop="yonghuzhanghao">
						<el-input v-model="sessionForm.yonghuzhanghao" placeholder="用户账号" readonly></el-input>
					</el-form-item>
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }'
						v-if="userTableName == 'yonghu'" label="头像" prop="touxiang">
						<file-upload tip="点击上传头像" action="file/upload" :limit="1" :multiple="true"
							:fileUrls="sessionForm.touxiang ? sessionForm.touxiang : ''"
							@change="yonghutouxiangHandleAvatarSuccess"></file-upload>
					</el-form-item>
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }'
						v-if="userTableName == 'yonghu'" label="用户姓名" prop="yonghuxingming">
						<el-input v-model="sessionForm.yonghuxingming" placeholder="用户姓名"></el-input>
					</el-form-item>
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }'
						v-if="userTableName == 'yonghu'" label="性别" prop="xingbie">
						<el-select v-model="sessionForm.xingbie" placeholder="请选择性别">
							<el-option v-for="(item, index) in dynamicProp.xingbie" :key="index" :label="item"
								:value="item"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }'
						v-if="userTableName == 'yonghu'" label="手机号码" prop="shoujihaoma">
						<el-input v-model="sessionForm.shoujihaoma" placeholder="手机号码"></el-input>
					</el-form-item>
					<el-form-item class="balance" :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }'
						v-if="userTableName == 'yonghu'" label="余额">
						<div :style='{ "flexWrap": "wrap", "display": "flex" }'>
							<el-input v-model="sessionForm.money" placeholder="余额" readonly></el-input>
							<div @click="dialogFormVisibleMoney = true"
								:style='{ "cursor": "pointer", "padding": "0 15px", "margin": "0 20px 0 10px", "borderColor": "#1abc9e30", "color": "#1abc9e", "display": "inline-block", "outline": "none", "borderRadius": "0", "background": "none", "borderWidth": "0 0 1px", "width": "auto", "lineHeight": "40px", "fontSize": "14px", "borderStyle": "solid", "height": "40px" }'>
								点我充值</div>
						</div>
					</el-form-item>
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }'
						v-if="userTableName == 'yonghu'" label="建筑喜好">
						<el-select v-model="sessionForm.jianzhuleixing" placeholder="请选择建筑喜好">
							<el-option v-for="(item, index) in jianzhuleixingOption" :key="index" :label="item"
								:value="item"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }'
						v-if="userTableName == 'yonghu'" label="文学喜好">
						<el-select v-model="sessionForm.zuopinfenlei" placeholder="请选择文学喜好">
							<el-option v-for="(item, index) in zuopinfenlei" :key="index" :label="item"
								:value="item"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :style='{ "padding": "0", "textAlign": "center", "margin": "0" }'>
						<el-button
							:style='{ "border": "0", "cursor": "pointer", "padding": "0", "margin": "0 20px 0 0", "outline": "none", "color": "rgba(255, 255, 255, 1)", "borderRadius": "0px", "background": "#1abc9e", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
							type="primary" @click="onSubmit('sessionForm')">更新信息</el-button>
						<el-button
							:style='{ "border": "1px solid #eee", "cursor": "pointer", "padding": "0", "margin": "0", "outline": "none", "color": "#333", "borderRadius": "0px", "background": "#fcfcfc", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
							type="danger" @click="logout">退出登录</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="修改密码">
				<el-form class="center-preview-pv" ref="passwordForm" :model="passwordForm" :rules="passwordRules"
					label-width="80px">
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }' label="原密码"
						prop="password">
						<el-input type="password" v-model="passwordForm.password" placeholder="原密码"></el-input>
					</el-form-item>
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }' label="新密码"
						prop="newpassword">
						<el-input type="password" v-model="passwordForm.newpassword" placeholder="新密码"></el-input>
					</el-form-item>
					<el-form-item :style='{ "padding": "10px", "margin": "0 0 10px", "background": "#fff" }' label="确认密码"
						prop="repassword">
						<el-input type="password" v-model="passwordForm.repassword" placeholder="确认密码"></el-input>
					</el-form-item>
					<el-form-item :style='{ "padding": "0", "textAlign": "center", "margin": "0" }'>
						<el-button
							:style='{ "border": "0", "cursor": "pointer", "padding": "0", "margin": "0 20px 0 0", "outline": "none", "color": "rgba(255, 255, 255, 1)", "borderRadius": "0px", "background": "#1abc9e", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
							type="primary" @click="updatePassword">修改密码</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane v-for="(item, index) in menuList" :key="index" v-if="hasBack(item.menu)"
				:label="item.child[0].menu" :name="item.child[0].tableName"></el-tab-pane>
			<el-tab-pane label="我的发布"></el-tab-pane>
			<el-tab-pane label="我的关注"></el-tab-pane>
			<el-tab-pane label="我的订单"></el-tab-pane>
			<el-tab-pane label="我的地址" name="MyAddress">
				<router-view></router-view>
			</el-tab-pane>
			<el-tab-pane label="我的收藏"></el-tab-pane>
		</el-tabs>

		<el-dialog title="用户充值" :visible.sync="dialogFormVisibleMoney" width="726px" center>
			<el-form :model="chongzhiForm">
				<el-form-item label="充值金额" label-width="120px">
					<el-input type="number" v-model="chongzhiForm.money" autocomplete="off"
						placeholder="充值金额"></el-input>
				</el-form-item>
				<el-form-item label-width="120px">
					<el-radio-group v-model="chongzhiForm.radio">
						<el-radio style="margin-bottom: 30px" label="微信支付">
							<el-image style="width: 60px; height: 60px;vertical-align: middle;"
								:src="require('@/assets/weixin.png')" fit="fill"></el-image>
							<span style="display: inline-block;margin-left: 10px">微信支付</span>
						</el-radio>
						<el-radio label="支付宝支付">
							<el-image style="width: 60px; height: 60px;vertical-align: middle;"
								:src="require('@/assets/zhifubao.png')" fit="fill"></el-image>
							<span style="display: inline-block;margin-left: 10px">支付宝支付</span>
						</el-radio>
						<el-radio label="中国建设银行支付">
							<el-image style="width: 120px; height: 60px;vertical-align: middle;"
								:src="require('@/assets/jianshe.png')" fit="fill"></el-image>
						</el-radio>
						<el-radio label="中国农业银行支付">
							<el-image style="width: 126px; height: 60px;vertical-align: middle;"
								:src="require('@/assets/nongye.png')" fit="fill"></el-image>
						</el-radio>
						<el-radio label="中国银行支付">
							<el-image style="width: 140px; height: 60px;vertical-align: middle;"
								:src="require('@/assets/zhongguo.png')" fit="fill"></el-image>
						</el-radio>
						<el-radio label="交通银行支付">
							<el-image style="width: 120px; height: 60px;vertical-align: middle;"
								:src="require('@/assets/jiaotong.png')" fit="fill"></el-image>
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleMoney = false">取 消</el-button>
				<el-button type="primary" @click="chongzhi">确认充值</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import config from '@/config/config'
import menu from '@/config/menu'
import Vue from 'vue'
export default {
	//数据集合
	data() {
		return {
			jianzhuleixingOption: ['宫殿', '寺庙', '城墙', '桥梁', '民居', '其他'],
			title: '个人中心',
			baseUrl: config.baseUrl,
			sessionForm: {},
			passwordForm: {},
			passwordRules: {
				password: [
					{
						required: true,
						message: "密码不能为空",
						trigger: "blur"
					}
				],
				newpassword: [
					{
						required: true,
						message: "新密码不能为空",
						trigger: "blur"
					}
				],
				repassword: [
					{
						required: true,
						message: "确认密码不能为空",
						trigger: "blur"
					}
				]
			},
			rules: {},
			chongzhiForm: {
				money: '',
				radio: ''
			},
			menuList: [],
			disabled: false,
			dialogFormVisibleMoney: false,
			uploadUrl: config.baseUrl + 'file/upload',
			imageUrl: '',
			headers: { Token: localStorage.getItem('frontToken') },
			userTableName: localStorage.getItem('UserTableName'),
			dynamicProp: {},
			zuopinfenlei: []
		}
	},
	created() {
		let menus = menu.list()
		for (let x in menus) {
			if (menus[x].tableName == this.userTableName) {
				this.menuList = menus[x].backMenu
			}
		}
		if ('yonghu' == this.userTableName) {
			this.$set(this.sessionForm, 'yonghuzhanghao', null);
		}
		if ('yonghu' == this.userTableName) {
			this.$set(this.sessionForm, 'mima', null);
		}
		if ('yonghu' == this.userTableName) {
			this.$set(this.sessionForm, 'touxiang', null);
		}
		if ('yonghu' == this.userTableName) {
			this.$set(this.sessionForm, 'yonghuxingming', null);
		}
		if ('yonghu' == this.userTableName) {
			this.$set(this.sessionForm, 'xingbie', null);
		}
		if ('yonghu' == this.userTableName) {
			this.$set(this.sessionForm, 'shoujihaoma', null);
		}
		if ('yonghu' == this.userTableName) {
			this.$set(this.sessionForm, 'money', null);
		}
		if ('zhuanjia' == this.userTableName) {
			this.$set(this.sessionForm, 'zhuanjiazhanghao', null);
		}
		if ('zhuanjia' == this.userTableName) {
			this.$set(this.sessionForm, 'zhuanjiaxingming', null);
		}
		if ('zhuanjia' == this.userTableName) {
			this.$set(this.sessionForm, 'mima', null);
		}
		if ('zhuanjia' == this.userTableName) {
			this.$set(this.sessionForm, 'xingbie', null);
		}
		if ('zhuanjia' == this.userTableName) {
			this.$set(this.sessionForm, 'shouji', null);
		}
		if ('zhuanjia' == this.userTableName) {
			this.$set(this.sessionForm, 'touxiang', null);
		}
		if ('zhuanjia' == this.userTableName) {
			this.$set(this.sessionForm, 'money', null);
		}

		if ('yonghu' == this.userTableName && this.rules['yonghuzhanghao']) {
			this.rules['yonghuzhanghao'].push({ required: true, message: '请输入用户账号', trigger: 'blur' })
		} else if ('yonghu' == this.userTableName && !this.rules['yonghuzhanghao']) {
			this.$set(this.rules, 'yonghuzhanghao', [{ required: true, message: '请输入用户账号', trigger: 'blur' }]);
		}
		if ('yonghu' == this.userTableName && this.rules['mima']) {
			this.rules['mima'].push({ required: true, message: '请输入密码', trigger: 'blur' })
		} else if ('yonghu' == this.userTableName && !this.rules['mima']) {
			this.$set(this.rules, 'mima', [{ required: true, message: '请输入密码', trigger: 'blur' }]);
		}
		if ('yonghu' == this.userTableName && this.rules['yonghuxingming']) {
			this.rules['yonghuxingming'].push({ required: true, message: '请输入用户姓名', trigger: 'blur' })
		} else if ('yonghu' == this.userTableName && !this.rules['yonghuxingming']) {
			this.$set(this.rules, 'yonghuxingming', [{ required: true, message: '请输入用户姓名', trigger: 'blur' }]);
		}
		if ('yonghu' == this.userTableName) {
			this.$set(this.rules, 'shoujihaoma', [{ required: false, validator: this.$validate.isMobile, trigger: 'blur' }]);
		}
		if ('yonghu' == this.userTableName) {
			this.$set(this.rules, 'money', [{ required: false, validator: this.$validate.isNumber, trigger: 'blur' }]);
		}
		this.init();
		this.sessionForm = JSON.parse(localStorage.getItem('sessionForm'))
	},
	//方法集合
	methods: {
		init() {
			if ('yonghu' == this.userTableName) {
				this.dynamicProp.xingbie = '男,女'.split(',');
			}
			this.getFenlei()
		},
		getFenlei() {
			this.$http.get('zuopinfenlei/list', {}).then(res => {
				if (res.data.code == 0) {
					const list = res.data.data.list
					this.zuopinfenlei = []
					list.forEach(item => {
						this.zuopinfenlei.push(item.zuopinfenlei)
					});
					// 
				}
			});
		},
		setSession() {
			localStorage.setItem('sessionForm', JSON.stringify(this.sessionForm))
		},
		onSubmit(formName) {
			if (`yonghu` == this.userTableName && this.sessionForm.touxiang != null) {
				this.sessionForm.touxiang = this.sessionForm.touxiang.replace(new RegExp(this.$config.baseUrl, "g"), "");
			}
			if (`zhuanjia` == this.userTableName && this.sessionForm.touxiang != null) {
				this.sessionForm.touxiang = this.sessionForm.touxiang.replace(new RegExp(this.$config.baseUrl, "g"), "");
			}
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$http.post(this.userTableName + '/update', this.sessionForm).then(res => {
						if (res.data.code == 0) {
							this.setSession()
							this.$message({
								message: '更新成功',
								type: 'success',
								duration: 1500
							});
						}
					});
				} else {
					return false;
				}
			});
		},
		yonghutouxiangHandleAvatarSuccess(fileUrls) {
			this.sessionForm.touxiang = fileUrls;
		},
		zhuanjiatouxiangHandleAvatarSuccess(fileUrls) {
			this.sessionForm.touxiang = fileUrls;
		},
		chongzhi() {
			if (this.chongzhiForm.money == '') {
				this.$message({
					message: '请输入充值金额',
					type: 'error',
					duration: 1500
				});
				return;
			}
			if (this.chongzhiForm.money <= 0) {
				this.$message({
					message: '请输入正确的充值金额',
					type: 'error',
					duration: 1500
				});
				return;
			}
			if (this.chongzhiForm.radio == '') {
				this.$message({
					message: '请选择充值方式',
					type: 'error',
					duration: 1500
				});
				return;
			}
			if (!this.sessionForm.money) {
				this.sessionForm.money = parseFloat(this.chongzhiForm.money)
			} else {
				this.sessionForm.money = parseFloat(this.sessionForm.money) + parseFloat(this.chongzhiForm.money);
			}

			this.$http.post(this.userTableName + '/update', this.sessionForm).then(res => {
				if (res.data.code == 0) {
					this.setSession()
					this.$message({
						message: '充值成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dialogFormVisibleMoney = false;
						}
					});
				}
			});
		},
		handleClick(tab, event) {
			switch (event.target.outerText) {
				case '个人中心':
					tab.$router.push('/index/center');
					break;
				case '修改密码':
					this.passwordForm = {
						password: '',
						newpassword: '',
						repassword: '',
					}
					this.$forceUpdate()
					break;
				case '我的发布':
					tab.$router.push('/index/myForumList');
					break;
				case '我的关注':
					tab.$router.push('/index/myFollowList');
					break;
				case '我的订单':
					tab.$router.push('/index/shop-order/order');
					break;
				case '我的地址':
					tab.$router.push('/index/shop-address/list');
					break;
				case '我的收藏':
					localStorage.setItem('storeupType', 1);
					tab.$router.push('/index/storeup');
					break;
				default:
					tab.$router.push(`/index/${tab.name}?centerType=1`);
			}

			this.title = event.target.outerText;
		},
		async updatePassword() {
			this.$refs["passwordForm"].validate(async valid => {
				if (valid) {
					var password = "";
					if (this.sessionForm.mima) {
						password = this.sessionForm.mima;
					} else if (this.sessionForm.password) {
						password = this.sessionForm.password;
					}
					if (this.passwordForm.password != password) {
						this.$message.error("原密码错误");
						return;
					}
					if (this.passwordForm.newpassword != this.passwordForm.repassword) {
						this.$message.error("两次密码输入不一致");
						return;
					}
					if (this.userTableName == 'yonghu') {
					}
					this.sessionForm.password = this.passwordForm.newpassword;
					this.sessionForm.mima = this.passwordForm.newpassword;
					this.$http.post(`${this.userTableName}/update`, this.sessionForm).then(({ data }) => {
						if (data && data.code === 0) {
							this.$message({
								message: "修改密码成功,下次登录系统生效",
								type: "success",
								duration: 1500,
								onClose: () => {
								}
							});
							this.setSession()
						} else {
							this.$message.error(data.msg);
						}
					});
				}
			})
		},
		logout() {
			localStorage.clear();
			Vue.http.headers.common['Token'] = "";
			this.$router.push('/index/home');
			this.activeIndex = '0'
			localStorage.setItem('keyPath', this.activeIndex)
			this.$forceUpdate()
			this.$message({
				message: '登出成功',
				type: 'success',
				duration: 1500,
			});
		},
		hasBack(name) {
			switch (name) {
				case '订单管理':
					return false
					break;
				case '我的收藏管理':
					return false
					break;
				default:
					return true
			}
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.center-preview {

	.el-tabs {
		& /deep/ .el-tabs__header {
			.el-tabs__nav {
				overflow: auto;
			}

			::-webkit-scrollbar {
				-webkit-appearance: none;
				width: 6px;
				height: 6px;
			}

			::-webkit-scrollbar-track {
				background: rgba(0, 0, 0, 0.1);
				border-radius: 0;
			}

			::-webkit-scrollbar-thumb {
				cursor: pointer;
				border-radius: 5px;
				background: rgba(0, 0, 0, 0.15);
				transition: color 0.2s ease;
			}

			::-webkit-scrollbar-thumb:hover {
				background: rgba(0, 0, 0, 0.3);
			}

			.el-tabs__nav-wrap {
				margin: 0;

				&::after {
					content: none;
				}
			}

			.el-tabs__active-bar {
				display: none !important;
			}
		}

		.center-preview-pv {
			.el-date-editor.el-input {
				width: auto;
			}

			.balance {
				.el-input {
					width: auto;
				}
			}
		}
	}
}

.center-preview .el-tabs /deep/ .el-tabs__header {
	padding: 0 0 2px;
	margin: 0;
	background: #fff;
	width: 100%;
	border-color: #1abc9e30;
	border-width: 0 0 1px;
	position: relative;
	float: left;
	border-style: solid;
	height: auto;
}

.center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item {
	padding: 0 10px;
	margin: 0 10px 0 0;
	color: #999;
	font-weight: 500;
	display: block;
	font-size: 16px;
	line-height: 40px;
	float: left;
	background: none;
	width: 100;
	position: relative;
	text-align: center;
	height: 40px;
}

.center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item:hover {
	padding: 0 10px;
	color: #1abc9e;
	background: none;
	font-weight: 600;
	font-size: 16px;
	line-height: 40px;
	position: relative;
	text-align: center;
	height: 40px;
}

.center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item.is-active {
	padding: 0 10px;
	margin: 0 10px 0 0;
	color: #1abc9e;
	font-weight: 600;
	display: block;
	font-size: 16px;
	line-height: 40px;
	float: left;
	background: none;
	width: auto;
	position: relative;
	text-align: center;
	height: 40px;
}

.center-preview .el-tabs /deep/ .el-tabs__content {
	padding: 0px;
	margin: 20px 0 0;
	background: #fff;
	width: 100%;
}

.center-preview .el-tabs /deep/ .el-tabs__content .el-tab-pane {
	width: 100%;
}

.center-preview-pv .el-form-item /deep/ .el-form-item__label {
	padding: 0 10px 0 0;
	color: #666;
	font-weight: 500;
	width: 80px;
	font-size: 14px;
	line-height: 40px;
	text-align: right;
}

.center-preview-pv .el-form-item .el-form-item__content {
	margin-left: 80px;
}

.center-preview-pv .el-input /deep/ .el-input__inner {
	border-radius: 0px;
	padding: 0 12px;
	box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	outline: none;
	color: #666;
	width: 400px;
	font-size: 14px;
	border-color: #1abc9e30;
	border-width: 0 0 1px;
	border-style: solid;
	height: 40px;
}

.center-preview-pv .el-select /deep/ .el-input__inner {
	border-radius: 0px;
	padding: 0 12px;
	box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	outline: none;
	color: #666;
	width: 400px;
	font-size: 14px;
	border-color: #1abc9e30;
	border-width: 0 0 1px;
	border-style: solid;
	height: 40px;
}

.center-preview-pv .el-date-editor /deep/ .el-input__inner {
	border-radius: 0px;
	padding: 0 10px 0 30px;
	box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	outline: none;
	color: #666;
	width: 200px;
	font-size: 14px;
	border-color: #1abc9e30;
	border-width: 0 0 1px;
	border-style: solid;
	height: 40px;
}

.center-preview-pv /deep/ .avatar-uploader-icon {
	cursor: pointer;
	border-radius: 0px;
	color: #1abc9e50;
	width: 200px;
	font-size: 32px;
	border-color: #1abc9e30;
	border-width: 0 0 1px;
	line-height: 80px;
	border-style: solid;
	text-align: center;
	height: 80px;
}

.center-preview-pv .el-form-item.balance /deep/ .el-input__inner {
	border-radius: 0px;
	padding: 0 12px;
	color: #666;
	display: inline-block;
	width: 200px;
	font-size: 14px;
	border-color: #1abc9e30;
	border-width: 0 0 1px;
	border-style: solid;
	height: 40px;
}
</style>
